<template>
    <el-dialog
        v-model="configCenterAddOrUpdateDialogVisible"
        title="添加配置"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="configCenterForm" :rules="configCenterRules" ref="configCenterFormRef">
                <el-form-item label="所属微服务" label-width="20%" prop="application">
                    <el-select v-model="configCenterForm.application" clearable placeholder="所属微服务" style="width: 100%">
                        <el-option :value="item.applicationName" :label="item.applicationName" v-for="item in applicationList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属环境" label-width="20%" prop="profile">
                    <el-input v-model="configCenterForm.profile" placeholder="所属环境" clearable />
                </el-form-item>
                <el-form-item label="键" label-width="20%" prop="key">
                    <el-input v-model="configCenterForm.key" placeholder="键" clearable />
                </el-form-item>
                <el-form-item label="值" label-width="20%" prop="value">
                    <el-input v-model="configCenterForm.value" placeholder="值" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(configCenterFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="ServiceAddOrUpdateConfigDialog" setup lang="ts">
import {applicationInfoQuery} from "@/request/service";
import {ElNotification, FormInstance} from "element-plus";
import {addConfigInfoQuery, configInfoQuery, updateConfigInfoQuery} from "@/request/configCenter";
import {computed, defineProps, ref} from "vue";
import {useServiceConfigStore} from "@/stores/serviceManage/serciceConfig";

let props = defineProps(['configCenterForm']);

let configCenterForm = computed(() => {return props['configCenterForm']});

let configCenterRules = ref({
    application: [{ required: true, message: '所属微服务不能为空', trigger: 'blur' }],
    profile: [{ required: true, message: '所属环境不能为空', trigger: 'blur' }],
    key: [{ required: true, message: '键不能为空', trigger: 'blur' }],
    value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
});
let applicationList = ref([]);
let saveLoading = ref(false);

let configCenterAddOrUpdateDialogVisible = computed(() => {return useServiceConfigStore().addOrUpdateDialog});
let configCenterSearchData = computed(() => {return useServiceConfigStore().configCenterSearchData});

// 查询应用列表
applicationInfoQuery({}).then(res => {
    let global = {
        id: 0,
        applicationName: "GLOBAL"
    }
    res.data.unshift(global)
    applicationList.value = res.data
})

function cancelDialog() {
    useServiceConfigStore().resetAddOrUpdateDialog(false);
}

let configCenterFormRef = ref<FormInstance>();

function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true
    formEl.validate((valid) => {
        if (valid) {
            if (configCenterForm.value.id !== '') {
                // 修改
                updateConfigInfoQuery(configCenterForm.value).then(res => {
                    if (res['code'] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res['message'],
                            type: 'success'
                        })
                        configInfoQuery(configCenterSearchData.value).then(res => {
                            useServiceConfigStore().resetConfigCenterDataList(res.data);
                        })
                        useServiceConfigStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 调用后端接口插入数据
                addConfigInfoQuery(configCenterForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        configInfoQuery(configCenterSearchData.value).then(res => {
                            useServiceConfigStore().resetConfigCenterDataList(res.data);
                        })
                        useServiceConfigStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>